<template>
  <el-row type="flex" class="product-intro">
    <div class="product-left">
      <div class="preview-wrap">
        <edu-image :src="courseInfo.cover_url"></edu-image>
        <span class="tag" :class="courseTypeClass[courseInfo.course_type]">{{
          courseInfo.course_type_text
        }}</span>
      </div>
      <!-- 分享/扫码 -->
      <el-row class="header-hint" type="flex" align="middle">
        <div class="hint-item">
          <el-button
            type="text"
            :class="[collectionState ? 'acitve' : '']"
            icon="edu-icon-shoucang edu-icon--left"
            @click="handleDeleteCollection(courseInfo)"
            v-if="collectionState"
            >已收藏
          </el-button>
          <el-button
            type="text"
            icon="edu-icon-shoucang edu-icon--left"
            @click="handleCollection(courseInfo)"
            v-else
            >收藏</el-button
          >
        </div>
        <div class="hint-item">
          <el-button
            type="text"
            slot="reference"
            icon="edu-icon-fenxiang edu-icon--left"
            @click="handleShareClick"
            >分享</el-button
          >
        </div>
        <div class="hint-item">
          <el-popover placement="bottom" trigger="hover">
            <el-row type="flex" justify="center">
              <vue-qr :text="wxpayQrcode" :size="120" :margin="0"></vue-qr>
            </el-row>
            <el-button type="text" slot="reference" icon="edu-icon-saoma edu-icon--left"
              >扫码查看</el-button
            >
          </el-popover>
        </div>
        <div class="hint-item">
          <el-link
            :underline="false"
            icon="edu-icon-kefu edu-icon--left"
            target="_blank"
            :href="
              siteInfoUrl
                ? 'http://wpa.qq.com/msgrd?v=1&uin=' + siteInfo.online_consult + '&site=qq&menu=yes'
                : siteInfo.online_consult
            "
            >客服</el-link
          >
        </div>
      </el-row>
    </div>
    <el-skeleton class="course-skeleton" :loading="loading" :rows="6">
      <el-row type="flex" justify="space-between" class="course-wrap">
        <el-col :span="24">
          <el-row class="course-info" type="flex" align="middle" justify="space-between">
            <el-row type="flex" align="middle">
              <div class="tab" v-if="courseInfo.update_status == 1">
                连载中
              </div>
              <div class="name">{{ courseInfo.title }}</div>
            </el-row>
            <!-- 评分 -->
            <el-row type="flex" align="middle">
              <edu-rate :value.sync="courseInfo.score_star" :args="argsStar"></edu-rate>
            </el-row>
          </el-row>
          <el-row type="flex" class="course-data">
            <div class="item" v-if="courseInfo.course_type == 4">
              {{ `课程数：${courseInfo.section_count}课程` }}
            </div>
            <div class="item" v-else>
              {{ `课时数：${courseInfo.section_count}课时` }}
            </div>
            <div class="item">
              {{ `${courseInfo.sale_count}人在学` }}
            </div>
            <template v-if="courseInfo.is_buy === 1">
              <div class="item" v-if="courseInfo.term_rest === -1">
                永久有效
              </div>
              <div class="item" v-else>
                距离课程到期还有<span>{{ formatTime(courseInfo.term_rest) }}</span
                >天
              </div>
            </template>
            <template v-else>
              <div class="item" v-if="courseInfo.term_time === 0">
                永久有效
              </div>
              <div class="item" v-else-if="('' + courseInfo.term_time).length < 5">
                购买之日起<span>{{ courseInfo.term_time }}</span
                >天内有效
              </div>
              <div class="item" v-else>
                {{ courseInfo.term_time | parseTime('{y}年{m}月{d}日前有效') }}
              </div>
            </template>
          </el-row>
          <!-- <el-divider></el-divider> -->
        </el-col>
        <el-col v-if="courseInfo.is_agent == 0" class="course-coupon">
          <el-row type="flex" align="middle">
            <el-row type="flex" class="course-coupon-box">
              <template v-for="(item, index) in couponList.slice(0, 3)">
                <el-row
                  type="flex"
                  align="middle"
                  class="item"
                  :class="[item.user_has == 1 ? 'active' : '', handieCouponType(item.coupon_type)]"
                  :key="index"
                  v-if="item.user_use == 0"
                >
                  <span class="text" v-if="item.coupon_type == 1"
                    >满{{ item.maxprice | floatCount }}减{{ item.price | floatCount }}</span
                  >
                  <span class="text" v-else-if="item.coupon_type == 2"
                    >{{ item.discount | floatCount }}折</span
                  >
                  <span class="text" v-else-if="item.coupon_type == 3">课程卡</span>
                  <el-link
                    :underline="false"
                    :disabled="item.user_has == 1"
                    class="btn"
                    @click="handieDeriveCoupon(item.id)"
                    >{{ item.user_has == 1 ? '已领取' : '领取' }}</el-link
                  >
                </el-row>
              </template>
            </el-row>
            <el-popover
              placement="bottom-end"
              trigger="hover"
              width="428"
              v-if="couponList.length > 3"
            >
              <div class="course-coupon-popover">
                <el-scrollbar class="scrollbar">
                  <template v-for="(item, index) in couponList.slice(3)">
                    <el-row
                      type="flex"
                      align="middle"
                      class="item"
                      :class="[
                        item.user_has == 1 ? 'active' : '',
                        handieCouponType(item.coupon_type)
                      ]"
                      v-if="item.user_use == 0"
                      :key="index"
                    >
                      <span class="cond" v-if="item.coupon_type == 1">{{
                        item.price | formatMoney
                      }}</span>
                      <span class="cond" v-else-if="item.coupon_type == 2"
                        >{{ item.discount | floatCount }}折</span
                      >
                      <span class="cond" v-else-if="item.coupon_type == 3">课程卡</span>
                      <div class="info">
                        <span class="name" v-if="item.coupon_type == 1"
                          >满{{ item.maxprice | floatCount }}减{{ item.price | floatCount }}</span
                        >
                        <span class="name" v-else-if="item.coupon_type == 2">打折卡</span>
                        <span class="name" v-else-if="item.coupon_type == 3">课程卡</span>
                        <div class="time">
                          {{ item.use_stime | parseTime('{y}.{m}.{d}') }}至{{
                            item.use_etime | parseTime('{y}.{m}.{d}')
                          }}
                        </div>
                      </div>
                      <el-button
                        type="primary"
                        size="mini"
                        class="btn"
                        :disabled="item.user_has == 1"
                        @click="handieDeriveCoupon(item.id)"
                        >{{ item.user_has == 1 ? '已领取' : '领取' }}</el-button
                      >
                    </el-row>
                  </template>
                </el-scrollbar>
              </div>
              <el-button slot="reference" type="text" size="mini" class="course-coupon-popover-btn"
                >更多<i class="el-icon-d-arrow-right"></i
              ></el-button>
            </el-popover>
          </el-row>
        </el-col>
        <!-- 活动 -->
        <base-promotion
          v-if="!$util.isEmpty(courseInfo.promotion) && courseInfo.is_buy == 0"
          :promotion="courseInfo.promotion"
          @end="handleReload"
        ></base-promotion>
        <el-col :span="24">
          <el-row class="course-summary" type="flex" align="middle" justify="space-between">
            <el-row type="flex" align="middle">
              <div class="summary-item price" v-if="courseInfo.price == 0">
                免费
              </div>
              <div class="summary-item free" v-else>
                {{ courseInfo.user_price | formatMoney }}
              </div>
              <div
                class="summary-item before-price"
                v-if="
                  courseInfo.scribing_price > 0 && courseInfo.scribing_price > courseInfo.user_price
                "
              >
                {{ courseInfo.scribing_price | formatMoney }}
              </div>
              <el-row
                v-if="courseInfo.is_agent == 0 && courseInfo.vip_price != courseInfo.user_price"
                class="summary-item member-price"
                type="flex"
                align="middle"
              >
                <span class="text">会员价：</span>
                <span class="number" v-if="courseInfo.vip_price == 0">免费</span>
                <span class="number" v-else>{{ courseInfo.vip_price | formatMoney }}</span>
              </el-row>
              <!-- 未购买显示 -->
              <template
                v-if="courseInfo.is_buy == 0 && courseInfo.vip_price != courseInfo.user_price"
              >
                <!-- 未开通会员 -->
                <router-link to="/my/finance/my_vip" class="vip-status" v-if="accountVipStatus == 0"
                  >开通会员</router-link
                >
              </template>
            </el-row>
            <!-- 已购买 -->
            <el-row type="flex" v-if="courseInfo.is_buy == 1">
              <!-- 无活动 -->
              <template v-if="$util.isEmpty(courseInfo.promotion) || $util.isEmpty(this.shareCode)">
                <el-button type="primary" size="medium" @click="handleCourseGo(courseInfo)">
                  {{ courseInfo.is_learning == 0 ? '开始学习' : '继续学习' }}
                </el-button>
              </template>
              <template v-else>
                <el-button
                  type="primary"
                  size="medium"
                  @click="handleInitiateBargain"
                  v-if="courseInfo.promotion.type === 3"
                >
                  邀请砍价
                </el-button>
                <el-button
                  size="medium"
                  plain
                  @click="handleCourseGo(courseInfo)"
                  v-if="courseInfo.course_type != 2"
                >
                  {{ courseInfo.is_learning == 0 ? '开始学习' : '继续学习' }}
                </el-button>
              </template>
            </el-row>
            <!-- 未购买 -->
            <el-row type="flex" v-else>
              <!-- 免费课程 -->
              <div v-if="courseInfo.user_price === 0">
                <template
                  v-if="$util.isEmpty(courseInfo.promotion) || $util.isEmpty(this.shareCode)"
                >
                  <el-button type="primary" size="medium" @click="handleCourseStudent()"
                    >加入学习</el-button
                  >
                </template>
                <template v-else>
                  <el-button
                    type="primary"
                    size="medium"
                    @click="handleInitiateBargain"
                    v-if="courseInfo.promotion.type === 3"
                  >
                    邀请砍价
                  </el-button>
                  <el-button size="medium" plain @click="handleCourseStudent()">加入学习</el-button>
                </template>
              </div>
              <template v-else>
                <!-- 无活动/获取活动未开始 -->
                <template
                  v-if="
                    $util.isEmpty(courseInfo.promotion) || courseInfo.promotion.running_status === 0
                  "
                >
                  <el-button type="primary" size="medium" @click="goLearning()">加入学习</el-button>
                  <el-button size="medium" plain @click="hanblePaymentCart()">加入购物车</el-button>
                </template>
                <!-- 活动 -->
                <template v-else>
                  <!-- 秒杀/打折 -->
                  <template
                    v-if="courseInfo.promotion.type === 1 || courseInfo.promotion.type === 2"
                  >
                    <el-button type="primary" size="medium" @click="handleInitiateActivity"
                      >立即加入</el-button
                    >
                  </template>
                  <!-- 砍价 -->
                  <template v-else-if="courseInfo.promotion.type === 3">
                    <el-button type="primary" size="medium" @click="handleInitiateBargain"
                      >邀请砍价</el-button
                    >
                    <el-button size="medium" @click="goLearning()">立即加入</el-button>
                  </template>
                  <!-- 拼团 -->
                  <template v-else-if="courseInfo.promotion.type === 4">
                    <!-- 开团成功 -->
                    <template v-if="courseInfo.pintuan_data.status == 1">
                      <el-button
                        type="primary"
                        size="medium"
                        @click="openPintuanPopup(courseInfo.pintuan_data.id)"
                        >{{
                          `已参团${courseInfo.pintuan_data.join_num}/${courseInfo.pintuan_data.total_num}人`
                        }}</el-button
                      >
                    </template>
                    <template v-else>
                      <el-button type="primary" size="medium" @click="handleInitiatePintuan"
                        >发起拼团</el-button
                      >
                      <el-button
                        type="primary"
                        size="medium"
                        @click="handleCourseStudent()"
                        v-if="courseInfo.user_price === 0"
                        >加入学习</el-button
                      >

                      <el-button size="medium" v-else @click="goLearning()">立即加入</el-button>
                    </template>
                  </template>
                </template>
              </template>
            </el-row>
          </el-row>
        </el-col>
      </el-row>
    </el-skeleton>
    <!-- 拼团 -->
    <my-pintuan
      :promotion="courseInfo.promotion"
      v-if="!$util.isEmpty(courseInfo.promotion)"
    ></my-pintuan>
    <!-- 人脸验证 -->
    <EduFaceVerify
      v-if="faceVisible"
      :visible.sync="faceVisible"
      scene_key="course_section"
      :scene_id="faceData.recent_learn.section_id || 0"
      scene_type="1"
      @cancel="handleFace"
    ></EduFaceVerify>
  </el-row>
</template>

<script>
import vueQr from 'vue-qr'
import EduRate from '@/components/EduRate'
import BasePromotion from './basePromotion'
import MyPintuan from './myPintuan'
import EduFaceVerify from '@/components/EduFaceVerify'
import { mapGetters, mapState } from 'vuex'
import Base64 from '@/utils/base64.js'
export default {
  components: {
    EduRate,
    vueQr,
    BasePromotion,
    MyPintuan,
    EduFaceVerify
  },
  props: {
    courseInfo: {
      type: Object
    },
    wxpayQrcode: String,
    loading: {
      type: Boolean,
      default: true
    }
  },
  inject: ['reload'],
  data() {
    return {
      argsStar: {
        max: 5,
        show_score: 1,
        disabled: true
      },
      couponList: [],
      course_id: this.$route.params.id,
      course_info: this.courseInfo,
      courseTypeClass: {
        1: 'video',
        2: 'live',
        3: 'multipart',
        4: 'classes'
      },
      sourceType: { 1: 'video', 2: 'live', 3: 'offline', 4: 'classes' },
      liveRoomType: { 1: 'big-class', 2: 'small-class', 3: 'one-to-one' },
      faceVisible: false,
      faceData: null
    }
  },
  computed: {
    ...mapState({
      shareCode: state => state.projectSetting.globShareCode,
      userInfo: state => state.user.info,
      token: state => state.user.token
    }),
    // 用户是否登录
    ...mapGetters({
      faceStatus: 'projectSetting/getGlobFaceStatus',
      siteInfo: 'projectSetting/getGlobSiteInfo'
    }),
    // 收藏状态
    collectionState() {
      if (this.course_info.collected == 1) {
        return true
      }
      return null
    },
    // 用户信息会员状态
    accountVipStatus() {
      if (this.$util.isDef(this.$store.getters['user/accountInfo'].is_vip)) {
        return this.$store.getters['user/accountInfo'].is_vip
      }
      return 0
    },
    course_type() {
      return this.courseInfo.course_type
    },
    // 判断是数字，不然就是链接
    siteInfoUrl() {
      if (this.$util.digits(this.siteInfo.online_consult)) {
        return true
      } else {
        return false
      }
    }
  },
  watch: {
    courseInfo: {
      handler(now, old) {
        this.course_info = now
      }
    }
  },
  methods: {
    // 加入学习
    goLearning() {
      let query = {
        cid: this.courseInfo.id
      }

      // 砍价成功
      if (this.courseInfo.bargain_done === 1) {
        query = {
          ...query,
          pid: this.courseInfo.promotion.id
        }
      }

      // 如果code添加code
      if (!this.$util.isEmpty(this.shareCode)) {
        query = {
          ...query,
          share_code: this.shareCode
        }
      }

      query = {
        ...query,
        redirect: this.$route.path
      }
      this.$router.push({
        path: '/buy/course',
        query: query
      })
    },
    // 获取卡卷
    getCouponCourseInfo() {
      this.$api.getCouponCourse(
        {
          course_id: this.$route.params.id
        },
        res => {
          this.couponList = res.data
        }
      )
    },
    // 课程卡卷类型添加claas
    handieCouponType(type) {
      if (type == 1) {
        return 'manjian'
      } else if (type == 2) {
        return 'dazhe'
      } else if (type == 3) {
        return 'lesson'
      }
    },
    // 加入购物车
    hanblePaymentCart() {
      this.$globalToLogin(() => {
        this.$api.createCart(
          {
            mhm_id: this.courseInfo.mhm_id,
            course_id: this.course_id
          },
          res => {
            this.$message.success(res.msg)
            this.$store.dispatch('projectSetting/setGlobCartNumber')
          },
          error => {
            this.$message.error(error.msg)
          }
        )
      })
    },
    // 领取优惠卷
    handieDeriveCoupon(id) {
      this.$globalToLogin(() => {
        this.$api.createCouponDerive(
          id,
          {},
          res => {
            this.$message.success(res.msg)
            this.getCouponCourseInfo()
          },
          error => {
            this.$message.error(error.msg)
          }
        )
      })
    },
    // 课时跳转
    toPathSection(url, id) {
      this.$router.push({
        path: `/course/${this.$route.params.id}/${url}`,
        query: {
          mid: id
        }
      })
    },
    // 已购买加入课程
    handleCourseGo(item) {
      // 直播类型
      if (item.course_type == 2) {
        // 是否有正在直播
        if (!this.$util.isEmpty(item.section_live)) {
          this.handleLive(item)
        }
      } else {
        // 是否有点播学习记录
        if (!this.$util.isEmpty(item.recent_learn)) {
          // 是否需要人脸识别
          if (this.courseInfo.onhook_type == 3) {
            this.faceData = item
            this.faceEntrance()
          } else {
            this.jump(item)
          }
        }
      }
    },
    jump(item) {
      // 保存课时的数据，以免刷新的时候数据丢失
      this.$store.commit('course/setCurrentPlayItem', {
        ...item.recent_learn,
        id: item.recent_learn.section_id,
        course_type: item.course_type,
        is_buy: item.is_buy,
        audition: 0,
        section_rate: {
          current_time: item.recent_learn.current_time
        }
      })
      this.toPathSection('watch', item.id)
    },
    // 直播
    handleLive(item) {
      let sectionId = item.section_live.room_no // 课时id
      this.$store.commit('course/setCurrentPlayItem', {
        id: sectionId,
        course_id: item.section_live.course_id,
        section_live: item.section_live
      })
      if (item.section_live.live_type == 1) {
        // 声网直播
        this.$api.getLiveAgoraRoomInfo(sectionId, res => {
          const {
            data: { info }
          } = res
          let agoraName = {
            1: 'agora-big-class',
            2: 'agora-small-class',
            3: 'agora-one-to-one'
          }
          let agoraRoom = agoraName[info.course_live_type]
          this.$router.push({
            name: agoraRoom
          })
        })
      } else if (item.section_live.live_type == 2) {
        // cc大班课
        this.$router.push({
          name: 'cc-big-class'
        })
      } else if (item.section_live.live_type == 3) {
        // cc小班课
        let ccLive = item.section_live
        let user = this.userInfo
        let token = this.token
        let params = {
          userid: ccLive.cc_userid,
          roomid: ccLive.cc_room_id,
          password: ccLive.authtype === 0 ? `${token.ak}:${token.sk}` : '',
          username: user.nick_name,
          autoLogin: true,
          role: 'talker',
          template: 32
        }
        const url = `https://class.csslcloud.net/hdclass/#/talker?${this.params(params)}`
        this.$router.push({
          name: 'cc-live',
          query: {
            view: Base64.encode(url)
          }
        })
      }
    },
    params(obj) {
      let result = ''
      let item
      for (item in obj) {
        if (obj[item] && String(obj[item])) {
          result += `&${item}=${obj[item]}`
        }
      }
      if (result) {
        result = result.slice(1)
      }
      return result
    },
    handleFace() {
      this.jump(this.faceData)
    },
    // 窗口
    faceEntrance() {
      // 已认证
      if (this.faceStatus) {
        this.$messageBox
          .confirm('请进行人脸验证', {
            type: 'none',
            center: true,
            confirmButtonText: '去验证'
          })
          .then(() => {
            this.faceVisible = true
          })
          .catch(() => {})
      } else {
        this.$messageBox
          .confirm('未完成人脸认证，请先去认证', {
            type: 'none',
            center: true,
            confirmButtonText: '去认证'
          })
          .then(() => {
            this.$router.push({
              path: '/my/profile/face_verify',
              query: {
                back: 1
              }
            })
          })
          .catch(() => {})
      }
    },
    // 收藏
    handleCollection(data) {
      this.$globalToLogin(() => {
        this.$api.createCollection(
          {
            source_type: this.sourceType[this.course_type],
            source_id: data.id
          },
          res => {
            this.$message.success(res.msg)
            this.courseInfo.collected = 1
          }
        )
      })
    },
    // 取消收藏
    handleDeleteCollection(data) {
      this.$api.deleteCollection(
        {
          source_type: this.sourceType[this.course_type],
          source_id: data.id
        },
        res => {
          this.$message.success(res.msg)
          this.courseInfo.collected = 0
        }
      )
    },
    // 加入免费课程
    handleCourseStudent() {
      this.$globalToLogin(() => {
        this.$api.createCourseStudentJoin(
          {
            course_id: this.courseInfo.id
          },
          res => {
            this.$message.success(res.msg, _res => {
              this.reload()
            })
          }
        )
      })
    },
    // 点击分享
    handleShareClick() {
      this.$globalToLogin(() => {
        let query = {
          type: 1,
          id: this.$route.params.id
        }
        this.$api.getShareInfo(query, res => {
          this.$store.commit('promotion/SET_SHARE_DATA', {
            data: res.data,
            type: 1
          })
          this.$store.commit('promotion/SET_SHARE_VISIBLE', true)
        })
      })
    },
    // 发现拼团
    handleInitiatePintuan() {
      let _this = this
      let pintuan = _this.courseInfo.pintuan_data
      // 分享的拼团活动
      if (_this.$route.query.tuan_id) {
        _this.openPintuanPopup(_this.$route.query.tuan_id)
        return
      }
      // 无拼团时返回空对象
      if (_this.$util.isEmpty(pintuan) || pintuan.status === 3) {
        _this.getPintuanList()
        return
      }
      // 团状态[0：开团待审(未支付成功)；1：开团成功；2：拼团成功；3：团购失败；]
      if (pintuan.status === 0) this.$message.info('已入团成功，请确认支付')
    },
    // 拼团列表
    getPintuanList() {
      let _this = this
      _this.$api.getPromotionPintuanList(
        {
          promotion_id: _this.courseInfo.promotion.id
        },
        res => {
          _this.$store.commit('promotion/SET_PROMOTION_PINTUAN_LIST', res.data)
          _this.$store.commit('promotion/SET_PROMOTION_PINTUAN_VISIBLE', true)
        }
      )
    },
    // 参与拼团
    openPintuanPopup(tuan_id) {
      let _this = this
      _this.$api.getPromotionPintuanDetail(
        {
          tuan_id: tuan_id
        },
        res => {
          _this.$store.commit('promotion/SET_PINTUAN_DATA', res.data)
          _this.$store.commit('promotion/SET_PINTUAN_VISIBLE', true)
        },
        () => {
          _this.getPintuanList()
        }
      )
    },
    // 邀请砍价
    handleInitiateBargain() {
      let _this = this
      _this.$api.getPromotionBargainDetail(
        {
          promotion_id: _this.courseInfo.promotion.id
        },
        res => {
          _this.$store.commit('promotion/SET_BARGAIN_DATA', res.data)
          _this.$store.commit('promotion/SET_BARGAIN_VISIBLE', true)
        }
      )
    },
    // 加入秒杀/打折
    handleInitiateActivity() {
      let query = {
        cid: this.courseInfo.id,
        pid: this.courseInfo.promotion.id
      }
      // 如果code添加code
      if (!this.$util.isEmpty(this.shareCode)) {
        query = {
          ...query,
          share_code: this.shareCode
        }
      }

      query = {
        ...query,
        redirect: this.$route.path
      }

      this.$router.push({
        path: '/buy/course',
        query: query
      })
    },
    // 重构数据
    handleReload() {
      this.$emit('reload')
    },
    formatTime(seconds) {
      let day = Math.ceil(seconds / (24 * 3600))
      return day
    }
  },
  mounted() {
    this.getCouponCourseInfo()
  }
}
</script>

<style lang="scss" scoped>
.course-coupon-popover {
  height: 330px;
  .item {
    padding: 3px 0;
    &.active .cond {
      opacity: 0.6;
    }
    &.manjian {
      .cond {
        border-color: #ff8276;
        color: #ff8276;
      }
    }
    &.dazhe {
      .cond {
        border-color: #ffb872;
        color: #ffb872;
      }
    }
    &.lesson {
      .cond {
        border-color: #67c23a;
        color: #67c23a;
      }
    }
    .cond {
      width: 64px;
      height: 28px;
      font-size: 15px;
      line-height: 28px;
      text-align: center;
      border-width: 1px;
      border-style: solid;
    }
    .info {
      flex: 1;
      margin-left: 14px;
      margin-right: 14px;
      font-size: 12px;
      .name {
        color: $text-color-import;
      }
      .time {
        margin-top: 2px;
        color: $text-color-auxiliary;
      }
    }
    .btn {
      border-radius: 0;
      border: none;
      width: 46px;
      height: 23px;
      padding: 0;
    }
  }
  .scrollbar {
    height: 100%;
    ::v-deep .el-scrollbar__wrap {
      overflow-x: auto;
    }
  }
}
// 头部
.product-intro {
  background-color: #ffffff;
  padding: 26px 30px 15px;
  .product-left {
    width: 412px;
    .preview-wrap {
      width: 100%;
      height: 0;
      padding-top: 228px;
      position: relative;
      .el-image {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
      .tag {
        padding: 5px 8px;
        font-size: 12px;
        font-weight: 400;
        line-height: 1;
        color: #ffffff;
        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08);
        border-radius: 0px 0px 6px 0px;
        position: absolute;
        left: 0;
        top: 0;
        &.video {
          background-color: #ff8a8a;
        }
        &.live {
          background-color: #67c23a;
        }
        &.multipart {
          background-color: #80ccff;
        }
        &.classes {
          background-color: #ff8a52;
        }
      }
    }
    .header-hint {
      margin-top: 18px;
      ::v-deep .el-button,
      .el-link {
        padding: 0;
        font-size: 12px;
        font-weight: 400;
        color: $text-color-auxiliary;
        &:hover {
          @include edu-color-auxiliary;
        }
      }
      ::v-deep .acitve .edu-icon-shoucang {
        @include edu-color-auxiliary;
      }
      .hint-item + .hint-item {
        margin-left: 30px;
      }
    }
  }
  .course-skeleton {
    flex-grow: 1;
    margin-left: 20px;
  }
  .course-wrap {
    height: 100%;
    flex-direction: column;
    padding: 14px 0 33px;
    .course-info {
      .tab {
        padding: 3px 4px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(103, 194, 58, 1);
        border-radius: 4px;
        border: 1px solid rgba(103, 194, 58, 1);
        margin-right: 10px;
        line-height: 1;
      }
      .name {
        max-width: 400px;
        flex-grow: 1;
        font-size: 18px;
        font-weight: 500;
        @include ellipsis();
        color: $text-color-import;
      }
    }
    .course-data {
      margin-top: 24px;
      .item {
        font-size: 14px;
        color: $text-color-secondary;
        span {
          color: #f54030;
        }
      }
      .item + .item {
        margin-left: 30px;
      }
    }
    .el-divider {
      margin: 14px 0 0;
    }
    .course-summary {
      .summary-item + .summary-item {
        margin-left: 10px;
      }
      .price {
        font-size: 20px;
        color: $text-color-price;
      }
      .free {
        font-size: 16px;
        color: $text-color-free;
      }
      .before-price {
        font-size: 14px;
        color: $text-color-auxiliary;
        text-decoration: line-through;
      }
      .member-price {
        color: $text-color-other;
        .text {
          font-size: 12px;
        }
        .number {
          font-size: 15px;
        }
      }
      .vip-status {
        margin-left: 10px;
        padding: 2px 3px;
        color: #ff8a52;
        font-size: 13px;
        border: 1px solid #ff8a52;
        text-decoration: none;
      }
    }

    .course-coupon {
      .course-coupon-box {
        .item + .item {
          margin-left: 20px;
        }
        .item {
          width: 117px;
          height: 23px;
          background-size: 100% 100%;
          &.active {
            opacity: 0.6;
          }
          &.manjian {
            background-image: url(~@assets/images/public/details-manjian.png);
            .text {
              color: #ff8276;
            }
          }
          &.dazhe {
            background-image: url(~@assets/images/public/details-dazhe.png);
            .text {
              color: #ffb872;
            }
          }
          &.lesson {
            background-image: url(~@assets/images/public/details-lesson.png);
            .text {
              color: #67c23a;
            }
          }
          .text {
            flex: 1;
            padding-left: 4px;
            font-size: 12px;
            text-align: center;
          }
          .btn {
            width: 41px;
            color: #fff;
            font-size: 12px;
          }
        }
      }
      .course-coupon-popover-btn {
        margin-left: 20px;
        font-size: 13px;
        padding-top: 4px;
        padding-bottom: 4px;
        color: $text-color-auxiliary;
        i {
          transform: rotate(90deg);
        }
      }
    }
  }
}
</style>
